<%@page contentType="text/html;charset=utf-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="${pageContext.request.contentType}/assets/vendor/bootstrap/css/bootstrap.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="${pageContext.request.contentType}/assets/vendor/font-awesome/css/font-awesome.min.css">
    <!-- Custom Font Icons CSS-->
    <link rel="stylesheet" href="${pageContext.request.contentType}/assets/css/font.css">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="${pageContext.request.contentType}/assets/css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="${pageContext.request.contentType}/assets/css/custom.css">
    <link rel="stylesheet" href="${pageContext.request.contentType}/assets/css/layer.css">
    <link rel="stylesheet" href="${pageContext.request.contentType}/assets/bootstrap/css/bootstrap-switch.min.css">
    <title>查看用户</title>
</head>
<body>
<%@include file="../publicjsp/head.jsp"%>


<div class="d-flex align-items-stretch">
    <!-- Sidebar Navigation-->
    <nav id="sidebar">
        <!-- Sidebar Header-->
        <%@include file="../publicjsp/sideHead.jsp"%>
        <!-- Sidebar Navidation Menus--><span class="heading">Main</span>
        <%@include file="../publicjsp/sidebar.jsp"%>
    </nav>    <!-- Sidebar Navigation end-->
    <div class="page-content">
        <div class="page-header">
            <div class="container-fluid">
                <h2 class="h5 no-margin-bottom">用户列表</h2>
            </div>
        </div>
        <section class="no-padding-bottom">
            <div class="title">
                <form class="form-inline" method="post" action="${pageContext.request.contentType}/user/getUsers">
                    <div class="form-group">
                        <label for="inlineFormInput" class="sr-only">Name</label>
                        <input id="inlineFormInput" name="searchName" type="text" placeholder="按名字查找" class="mr-sm-3 form-control">
                    </div>
                    <div class="form-group">
                        <input type="submit" value="查询" class="btn btn-primary">
                    </div>
                </form>

            </div>
            <div class="table-responsive">
                <table class="table">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>简介</th>
                        <th>操作</th>
                        <th>加关注</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach items="${userList}" var="user">
                        <tr>
                            <th scope="row">${user.user_id}</th>
                            <td>${user.real_name}</td>
                            <td>
                            <c:if test="${user.gender == 0}">
                                女
                            </c:if>
                                <c:if test="${user.gender == 1}">
                                    男
                                </c:if>
                            </td>
                            <td>${user.age}</td>
                            <td>${user.introduction}</td>
                            <td>
                                <input type="submit" value="详细信息" class="btn-xs btn-primary userDetail">
                            </td>
                            <td>

                                <c:if test="${user.fid == null}">
                                    <input onclick="followUser(this,'${user.user_id}')" type="checkbox" value="" class="checkbox-template">
                                </c:if>

                                <c:if test="${user.fid == null}">
                                    <input onclick="followUser(this,'${user_fid}')" type="checkbox" value="" class="checkbox-template" checked>
                                </c:if>

                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>

                <nav class="text-center" aria-label="Page navigation">
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <c:forEach varStatus="vs" begin="${startPage}" end="${endPage}" step="1">
                           <c:if test="${vs.count == currentPage}">
                               <li><a onclick="cPage(${vs.index})" class="act" href="#">${vs.index}</a></li>
                           </c:if>
                           <c:if test="${vs.index != currentPage}">
                               <li><a onclick="cPage(${vs.index})" href="#">${vs.index}</a></li>
                           </c:if>
                        </c:forEach>

                        <li>
                            <a onclick="cPage(${vs.count})" href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </section>

        <%@include file="../publicjsp/footer.jsp"%>

    </div>
</div>

<!-- JavaScript files-->
<script src="${pageContext.request.contentType}/assets/vendor/jquery/jquery.min.js"></script>
<script src="${pageContext.request.contentType}/assets/vendor/popper.js/umd/popper.min.js"> </script>
<script src="${pageContext.request.contentType}/assets/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contentType}/assets/bootstrap/js/bootstrap-switch.min.js"></script>
<script src="${pageContext.request.contentType}/assets/vendor/jquery.cookie/jquery.cookie.js"> </script>
<script src="${pageContext.request.contentType}/assets/vendor/chart.js/Chart.min.js"></script>
<script src="${pageContext.request.contentType}/assets/js/layer.js"></script>
<script src="${pageContext.request.contentType}/assets/vendor/jquery-validation/jquery.validate.min.js"></script>
<script src="${pageContext.request.contentType}/assets/js/charts-home.js"></script>
<script src="${pageContext.request.contentType}/assets/js/front.js"></script>
<script src="${pageContext.request.contentType}/assets/js/custom.js"></script>


<script>
    let pre = document.getElementById("pre");
    pre.onclick = function (ev) {
        var page =parseInt('${startPage}') - 1;
        if (page === 0){
            alert("已经是第一页了");
            return;
        }
        var searchName = '${searchName}';
        if (searchName === '' || searchName == null){
            window.location.href = '${pageContext.request.contentType}/user/getUsers?page'+page;
        }else {
            window.location.href = '${pageContext.request.contentType}/user/getUsers?page'+page+'&searchName='+searchName;
        }
    };
    
    var next = document.getElementById("next");
    next.onclick= function (ev) {
        var totalPage = parseInt('${totalPage}');
        var page =parseInt('${startPage}')+ parseInt('${pageCount}');
        if (page > totalPage) {
            alert("已经是最后一页了");
            return;
        }

        var searchName = '${searchName}';
        if (searchName === '' || searchName == null){
            window.location.href = '${pageContext.request.contentType}/user/getUsers?page'+page;
        }else {
            window.location.href = '${pageContext.request.contentType}/user/getUsers?page'+page+'&searchName='+searchName;
        }
    };

function cPage(page) {
    console.log(page);
    var searchName = '${searchName}';
    if (searchName === '' || searchName == null){
        window.location.href = '${pageContext.request.contentType}/user/getUsers?page'+page;
    }else {
        window.location.href = '${pageContext.request.contentType}/user/getUsers?page'+page+'&searchName='+searchName;
    }
}
function followUser(obj,ufId,) {
    var tag = $(obj).prop("checked");
    console.log("状态：" + tag)
    if (tag){
        //添加当前用户需要关注的id
        $.post('${pageContext.request.contentType}/user/followUser',{ufId:ufId},function (data) {
            if (data === '1'){
                alert("关注成功")
            }else {
                alert(data);
                console.log($(obj));
                $(obj).prop("checked",false);
            }
        })
    }else {
        console.log("取消关注");

        $.post('${pageContext.request.contentType}/user/unFollowUser',{ufId:ufId},function (data) {
            if (data === '1'){
                layer.msg("取关成功");
            }else {
                layer.msg(data);
                console.log($(obj));
                $(obj).prop("checked",true);
            }
        })
    }
}

</script>
</body>
</html>